<template>
  <div>
    <h3>文章天地</h3>
    <el-table
        v-loading="loading"
        current-row-key="aid"
        :data="dataList"
        style="width: 100%">
<!--      <el-table-column align="center"
                       type="index"
      >

      </el-table-column>-->
      <el-table-column align="center"
                       prop="title"
      >
        <template slot-scope="scope">
          <a @click="showDialog(scope.row)" style="color:blue;cursor:pointer">{{scope.row.title}}</a>
        </template>
      </el-table-column>
    </el-table>


    <!-- 查看弹层 -->

    <div class="add-form">

      <el-dialog title="详情" :visible.sync="dialogFormVisibleShow">

        <el-row>
          {{formTable.title}}
        </el-row>
        <el-row>
          {{formTable.contents}}
        </el-row>


        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">关闭</el-button>
        </div>
      </el-dialog>

    </div>
  </div>



</template>

<script>
import axios from "axios";

export default {
  name: "ArticleShow",
  data () {
    return {
      dataList:[],
      loading: true,
      dialogFormVisibleShow: false,
      formTable:{}
    }
  },
  created() {
    this.getAll();
  },
  methods: {
    /*    load () {
          this.count += 2
        }*/
    //获取数据
    getAll() {
      axios.get("/article-service/page/1/10" ).then(res => {
        //console.log(res.data.data);
        this.dataList = res.data.data.records;
        console.log(this.dataList);
        this.loading = false;
      });
    },

    //显示弹窗
    showDialog(row) {
      this.formTable.title = row.title;
      this.formTable.contents = row.contents;
      this.dialogFormVisibleShow = true;
      console.log(this.formTable);
    },
    cancel(){
      this.dialogFormVisibleShow = false;
    },
  }
}
</script>

<style scoped>

</style>